
<!-- 上传sdk -->
<script type="text/javascript" src="https://blueimp.github.io/JavaScript-MD5/js/md5.js"></script>
<script type="text/javascript" src="http://nos.netease.com/vod163/upload.js"></script>
<!-- 播放sdk -->
<link href="//nos.netease.com/vod163/nep.min.css" rel="stylesheet">
<script src="//nos.netease.com/vod163/nep.min.js"></script>

<!-- 播放modal -->
<div class="modal fade" id="modal-netease-player">
    <div class="modal-dialog ">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">视频播放器</h4>
            </div>
            <div class="modal-body">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12" style="text-align: center">
                            <video id="netease-player" class="video-js" x-webkit-airplay="allow" webkit-playsinline
                                   controls poster="//image.cloud.51taojingu.com/static/img/default_poster.jpg" preload="auto" width="500" height="360" data-setup="{}">
                            </video>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<script>
    var neteasePlayer = neplayer("netease-player", {}, function(){
        // 当播放器初始化完成时运行的回调函数
        console.log('网易播放器初始化完成...');
    });
    const modal_netease_player_id = 'modal-netease-player';
    $('#'+modal_netease_player_id).on('hide.bs.modal', function () {
        neteasePlayer.pause();
    });
    function neteasePlay(url) {
        $("#"+modal_netease_player_id).modal('show');
        console.log('播放：',url);
        neteasePlayer.setDataSource(url);
        neteasePlayer.play();
    }
</script>

<!-- 组件模版 -->
<script type="text/template-x" id="template-video-uploader">
<div>
    <div class="video-upload-box" style="width: 400px;">
        <input ref="fileChoose" style="width: 320px" @click="openBrowser" readonly placeholder="点击选择视频">
        <input style="display: none" ref="fileInput" type="file" accept="video/mp4" @change="choose">
        <button ref="uploadBtn">上传</button>
        <progress :value="progress" style="width: 320px"></progress>
        <a class="btn btn-info" @click="play">预览播放</a>
        <video style="display: none" width="300" href="200" controls ref="preview"></video>
    </div>
</div>
</script>
<!-- 组件代码 -->
<script>
    function randomId(prefix) {
        return prefix + '-' + Math.floor(Math.random() * 1000000);
    }
    Vue.component('video-uploader', {
        template: '#template-video-uploader',// 'value', 'video_type', 'video_id',
        props: ['videoid'],
        data: function () {
            this.$nextTick(function () {
                this.init();
            }.bind(this));

            return {
                progress: 0
            }
        },
        created: function () {
        },
        methods: {
            init: function () {
                var $this = this;
                // 初始化上传
                var inputId = randomId('video-uploader-file-input');
                this.$refs.fileInput.id = inputId;
                var btnId = randomId('video-uploader-btn');
                this.$refs.uploadBtn.id = btnId;
                var opt = {
                    fileInputId: inputId,
                    fileUploadId: btnId,
                    getInitInfo: function (file, callback) {
                        ajax({
                            uri: '/netease/upload_token',
                            data: {
                                file_name: file.fileName,
                                video_id: $this.videoid
                            },
                            success: function (resp) {
                                callback(resp.data);
                            }
                        });
                    },
                    onError: function (err) {
                        console.log(err);
                    },
                    onProgress: function (currFile) {
                        $this.progress = currFile.progress * 0.01;
                    },
                    onUploaded: function (currFile) {
                        $this.setProgress(0);
                        alert('上传完成');
                    }
                };
                Uploader(opt).init();
            },
            play: function () {
                if (!this.videoid) return;
                ajax({
                    uri: '/netease/get_video_src',
                    data: {video_id: this.videoid},
                    success: function (resp) {
                        neteasePlay(resp.data.origUrl);
                    }.bind(this)
                })
            },
            openBrowser: function () {
                this.$refs.fileInput.click()
            },
            choose: function () {
                var input = this.$refs.fileInput;
                var file = input.files[0];

                this.setDuration(URL.createObjectURL(file));
                this.$refs.fileChoose.value = file.name;
            },
            setProgress: function (val) {
                this.progress = val;
            },
            setDuration: function (url) {
                var this$1 = this;
                this.$refs.preview.ondurationchange = function () {
                    console.log(this.duration);
                    if (this.duration && this.duration > 0)
                        this$1.$emit('duration', this.duration);
                };
                this.$refs.preview.src = url;
            },
        },
        watch: {
            'videoid': function (nv, ov) {
                this.progress = 0;
                this.$refs.fileChoose.value = '';
                var fi = this.$refs.fileInput;
                if (fi.files.length > 0) {
                    fi.select();
                    document.selection.clear();
                }
            }
        }
    })
</script>